<template>
  <div class="bgc">
    <head-main
      :tipshow="tipshow"
      @tipsfn="tipsfn"
      :tipfnshow="tipfnshow"
      :homeshow="homeshow"
    />

    <div class="syjs">
      <img src="@/images/syjs.png" alt="" class="syjss" />
      <div class="sycbox">
        <div class="tool tools" @click="start">
          <img src="@/images/cxks.png" alt="" class="normal" />
          <img src="@/images/cxksac.png" alt="" class="active" />
        </div>
        <div class="tool tools" @click="close">
          <img src="@/images/tcsy.png" alt="" class="normal" />
          <img src="@/images/tcsyac.png" alt="" class="active" />
        </div>
      </div>
      <div class="syzsmt">
        <show-mx :mxmtnumber="mxmtnumber1" />
      </div>
      <div class="syzsmts">
        <show-mx :mxmtnumber="mxmtnumber2" />
      </div>
      <div class="czlcbox beautifulScroll">
        <img src="@/images/czlcjj.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import showMx from '@/components/showMxs.vue'
import HeadMain from '@/components/headMain.vue'
export default {
  components: { showMx, HeadMain },
  name: 'WorkspaceJsonIndex',

  data() {
    return {
      mxmtnumber1: 'ShuiMo_hao.glb',
      mxmtnumber2: 'ShuiMohuai.glb',
      tipshow: false,
      tipfnshow: false,
      homeshow: true
    }
  },

  mounted() {},

  methods: {
    // tips
    tipsfn(i) {
      this.tipshow = i
    },
    start() {
      this.$router.push({
        name: 'home'
      })
    },
    close() {
      if (
        navigator.userAgent.indexOf('Firefox') != -1 ||
        navigator.userAgent.indexOf('Chrome') != -1
      ) {
        window.location.href = 'about:blank'
        window.close()
      } else {
        window.opener = null
        window.open('', '_self')
        window.close()
      }
    }
  }
}
</script>

<style>
.bgc {
  background-color: #011c35;
  height: 100%;
}
.syjs {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1866px;
  height: 800px;
}
</style>

<!-- <template>
  <div>
    <div class="right-view">
   
      <button @click="moveUp">Up</button>
      <button @click="moveLeft">Move Left</button>
      <button @click="moveRight">Move Right</button>
    </div>
    <div
      class="top-view"
      :style="{
        backgroundSize: `${zoomWidth}% ${zoomHeight}%`,
        backgroundPosition: `${bgPositionX}% ${bgPositionY}%`
      }"
    >
     
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoomWidth: 100, // 初始宽度百分比
      zoomHeight: 100, // 初始高度百分比
      bgPositionX: 0, // 背景图片的横向位置
      bgPositionY: 0 // 背景图片的纵向位置
    }
  },
  methods: {
    moveUp() {
      // 在这里实现右视图上升的逻辑
      console.log('Right view is moving up!')

      // 每次上升都使俯视图的宽度和高度增加5%
      this.zoomWidth += 5
      this.zoomHeight += 5
    },
    moveLeft() {
      // 左移逻辑
      this.zoomWidth = this.zoomWidth + 0
      this.bgPositionX -= 10 // 根据需要调整移动步长
      console.log('向左移动', this.bgPositionX)
    },
    moveRight() {
      // 右移逻辑
      this.zoomWidth = this.zoomWidth + 0
      this.bgPositionX += 10 // 根据需要调整移动步长
      console.log('向右移动', this.bgPositionX)
    }
  }
}
</script>

<style>
.right-view {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 2;
}

.top-view {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 300px;
  height: 200px;
  /* 添加过渡效果，使放大动作更流畅 */
  transition: background-size 0.5s, background-position 0.5s;
  /* 设置背景图片和位置 */
  background-image: url('https://th.bing.com/th/id/OIP.g9UbVfyVZX-SfD09JcYr5QHaEK?rs=1&pid=ImgDetMain');
  background-repeat: no-repeat;
  background-position: center center;
  /* 添加竖线和横线 */
  position: relative;
}

.top-view::before,
.top-view::after {
  content: '';
  position: absolute;
  background-color: red;
}

.top-view::before {
  width: 2px; /* 竖线宽度 */
  height: 100%; /* 竖线高度 */
  top: 0;
  left: 50%; /* 放置在中间 */
  transform: translateX(-50%); /* 居中显示 */
}

.top-view::after {
  width: 100%; /* 横线宽度 */
  height: 2px; /* 横线高度 */
  left: 0;
  top: 50%; /* 放置在中间 */
  transform: translateY(-50%); /* 居中显示 */
}

button {
  cursor: pointer; /* 添加手型指示，表示按钮可点击 */
}
</style> -->
